/* 自定义指令钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。 */
import Vue from 'vue'
// 自定义拖拽指令(使用范围弹出框head拖拽)
Vue.directive('dragDialogHead', {
    bind(el) {
        let odiv = el;
        odiv.onmousedown = (e) => {
            var bigBox = document.getElementById("app");
            var bigBoxW = bigBox.offsetWidth;    // 返回元素的总宽度
            var bigBoxH = bigBox.offsetHeight;    // 返回元素的总高度

            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            // 鼠标按下并且移动事件
            document.onmousemove = (e) => {
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                // 移动当前元素
                if(left<=0){
                    left = 0;
                }else if(left>=bigBoxW-70){
                    left = bigBoxW-70;
                }

                if(top<=0){
                    top = 0;
                }else if(top>=bigBoxH-70){
                    top = bigBoxH-70;
                }
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
})

Vue.directive('scroll', {
    bind(el) {
        let odiv = el
        odiv.onmousedown = (e) => {
            let disX = e.clientX - odiv.parentNode.offsetLeft
            // 鼠标按下并且移动事件
            document.onmousemove = (e) => {
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                odiv.scrollLeft=10+"px";
            }
            document.onmouseup = (e) => {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
})

// 自定义按钮蓝色（主页面）
Vue.directive('buttonHaveColor', {
    bind(el) {
        let odiv = el
        odiv.style.fontSize = '18px'
        odiv.style.padding = '6.5px 21px'
        odiv.style.background = '#447DF3'
        odiv.style.borderRadius = '4px'
        odiv.style.color = '#ffffff'
        odiv.style.display = 'inline'
        odiv.style.border = '1px solid #447DF3'
        odiv.style.boxSizing = 'border-box'
        odiv.style.cursor = 'pointer'
    }
})

// 自定义按钮蓝色（主页面）
Vue.directive('buttonDisable', {
    bind(el) {
        let odiv = el
        odiv.style.fontSize = '18px'
        odiv.style.padding = '6.5px 21px'
        odiv.style.opacity = 0.2
        odiv.style.background = '#447DF3'
        odiv.style.borderRadius = '4px'
        odiv.style.color = '#ffffff'
        odiv.style.display = 'inline'
        odiv.style.border = '1px solid #447DF3'
        odiv.style.boxSizing = 'border-box'
        odiv.style.cursor = 'no-drop'
    }
})

// 自定义按钮蓝色（主页面）
Vue.directive('buttonNoHaveColor', {
    bind(el) {
        let odiv = el
        odiv.style.fontSize = '18px'
        odiv.style.padding = '6.5px 21px'
        odiv.style.background = 'none'
        odiv.style.borderRadius = '4px'
        odiv.style.color = '#262626'
        odiv.style.display = 'inline'
        odiv.style.border = '1px solid #D5D5D5'
        odiv.style.boxSizing = 'border-box'
        odiv.style.cursor = 'pointer'
    }
})

// 自定义按钮蓝色（弹框按钮）
Vue.directive('SmallbuttonHaveColor', {
    bind(el) {
        let odiv = el
        odiv.style.fontSize = '14px'
        odiv.style.padding = '0px 11px'
        odiv.style.borderRadius = '4px'
        odiv.style.display = 'inline-block'
        odiv.style.boxSizing = 'border-box'
        odiv.style.cursor = 'pointer'
        odiv.style.background = '#447DF3'
        odiv.style.color = '#ffffff'
        odiv.style.border = '1px solid #447DF3'
        odiv.style.opacity = 1
        odiv.style.height = '30px'
        odiv.style.lineHeight = '28px'
        odiv.onmouseover = function () {
            odiv.style.background = '#447DF3'
            odiv.style.color = '#ffffff'
            odiv.style.border = '1px solid #447DF3'
            odiv.style.opacity = 0.8
        }
        // 鼠标出
        odiv.onmouseout = function () {
            odiv.style.background = '#447DF3'
            odiv.style.color = '#ffffff'
            odiv.style.border = '1px solid #447DF3'
            odiv.style.opacity = 1
        }
    }
})

// 自定义按钮透明色（弹框按钮）
Vue.directive('SmallbuttonNoHaveColor', {
    bind(el) {
        let odiv = el
        odiv.style.fontSize = '14px'
        odiv.style.padding = '0px 11px'
        odiv.style.borderRadius = '4px'
        odiv.style.display = 'inline-block'
        odiv.style.boxSizing = 'border-box'
        odiv.style.cursor = 'pointer'
        odiv.style.background = 'none'
        odiv.style.color = '#262626'
        odiv.style.border = '1px solid #D5D5D5'
        odiv.style.height = '30px'
        odiv.style.lineHeight = '28px'
        odiv.onmouseover = function () {
            odiv.style.background = 'rgba(172,199,255,0.2)'
            odiv.style.color = '#262626'
            odiv.style.border = '1px solid #447df3'
        }

        // 鼠标出
        odiv.onmouseout = function () {
            odiv.style.background = 'none'
            odiv.style.color = '#262626'
            odiv.style.border = '1px solid #D5D5D5'
        }
    }
})


// hover效果（针对该元素的子级）
Vue.directive('hover', {
    bind(el) {
        let odiv = el;
        odiv.onmouseover = function () {
            odiv.firstChild.style.display = "block";
        }

        // 鼠标出
        odiv.onmouseout = function () {
            odiv.firstChild.style.display = "none";
        }
    }
})

// 没有hover效果（针对该元素的子级）
Vue.directive('noHover', {
    bind(el) {
        let odiv = el;
        odiv.onmouseover = function () {
            odiv.firstChild.style.display = "none";
        }

        // 鼠标出
        odiv.onmouseout = function () {
            odiv.firstChild.style.display = "none";
        }
    }
})
